// ------------------------------- 饼图 -------------------------------
function pieChart() {
  let myChart = echarts.init($('.pie')[0]);  // $('.pie') 是jQuery对象；加入 [0] 转成DOM对象
  let option = {
    // 标题
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 鼠标移入的提示
    tooltip: {
      // 自定义提示内容
      // {a} series[].name 
      // {b} series[].data[].name
      // {c} series[].data[].value
      // {d} 占比
      formatter: '{a}<br />{b} <strong>{c}</strong>人 占比{d}%'
    },
    // 系列数据
    series: [
      {
        name: '各地人员分布',
        type: 'pie', // pie表示饼图；
        radius: ['10%', '60%'], // 半径
        center: ['50%', '50%'], // 中心点坐标
        // roseType 表示扇形区域如何展示数据，可选值有area、radius
        // area 表示使用扇形的半径表示数据的大小；每个扇形的圆心角相同
        // radius 表示使用扇形的半径表示数据的大小；使用圆心角表示占比
        roseType: 'area',
        // itemStyle 表示每一项的样式
        itemStyle: {
          borderRadius: 6 // 扇形圆角设置
        },
        // data表示的是数据部分
        data: [
          { value: 40, name: '河北省' },
          { value: 20, name: '河南省' },
          { value: 32, name: '山东省' },
          { value: 30, name: '辽宁省' },
          { value: 28, name: '内蒙古' },
          { value: 26, name: '陕西省' },
          { value: 22, name: '山西省' },
          { value: 18, name: '甘肃省' }
        ]
      }
    ]
  };
  myChart.setOption(option);
}
pieChart();



// ------------------------------- 折线图 -----------------------------

// ------------------------------- 柱状图 -----------------------------
// ------------------------------- 地图 -------------------------------
function lineChart() {
  let myChart = echarts.init($('.line')[0]);
  let option = {
    // 图例
    legend: {
      top: 20
    },
    // 鼠标移入的提示
    tooltip: {
      // axis表示轴触发，鼠标放到线条上面或下面也可以触发
      // item 表示鼠标放到每一项上才能触发
      trigger: 'axis', // 触发方式
      // 悬浮框的位置
      position: function (pt) {
        // pt = [鼠标x轴位置, 鼠标y轴位置]
        return [pt[0], '15%']; // 悬浮框左右方向跟随鼠标移动；上下方向不变（始终距离顶部15%）
      }
    },
    // 标题
    title: {
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 工具箱（没用）
    // toolbox: {
    //   feature: {
    //     dataZoom: {
    //       yAxisIndex: 'none'
    //     },
    //     restore: {},
    //     saveAsImage: {}
    //   }
    // },
    xAxis: {
      type: 'category',
      // 坐标轴留白策略
      boundaryGap: false, // true表示留白；false表示不留白
      // data: date
      data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥'],
    },
    yAxis: {
      type: 'value',
      // 坐标轴留白策略
      // 数组，表示数据的延伸
      // y轴数据最大值 ==== 数据最大值 + 数据最大值 * 延伸比例  

      // y轴数据最大值 ==== 17000 + 17000 * 50% === 25500
      boundaryGap: [0, '50%']
    },
    // 数据缩放组件
    // 数据缩放组件，有三种类型
    // type: select 通过工具箱来缩放
    // type: inside 会把数据缩放组件内置到x轴上，通过鼠标滚轮缩放
    // type: slider (默认值)，会有一个单独的拖动条
    dataZoom: [
      {
        // type: 'slider',
        start: 0, // start和end都是百分比
        end: 15
      }
    ],
    // 系列数据
    series: [
      {
        name: '期望薪资',
        type: 'line',
        smooth: true, // 使用平滑曲线
        symbol: 'none', // 设置线条上没有任何点，也可以设置为空心圆、实心圆、矩形、.......
        itemStyle: {
          color: 'rgb(255, 70, 131)'
        },
        // areaStyle: {}, // 表示面试的这项删除
        data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
      },
      {
        name: '实际薪资',
        type: 'line',
        smooth: true,
        symbol: 'none',
        itemStyle: {
          color: 'rgb(255, 200, 31)'
        },
        data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
      }
    ]
  };
  myChart.setOption(option);
}
lineChart();
// ------------------------------- 柱状图 -----------------------------
function barChart() {
  let myChart = echarts.init($('.barChart')[0]); // 注意，盒子不要找错
  let option = {
    tooltip: {
      trigger: 'axis', // 轴触发，可选 item
      axisPointer: { // 坐标轴指示器
        type: 'cross', // 横着的一条虚线
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 网格
    grid: {
      top: 30,
      left: '7%',
      right: '7%',
      bottom: 30,
    },
    // 图例
    legend: {},
    // X轴
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow' // 阴影
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        // name: '分数',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value} 分'
        }
      },
      {
        type: 'value',
        // name: '人数',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value} 人'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        barWidth: 15,
        data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78]
      },
      {
        name: '低于60分人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2]
      },
      {
        name: '60到80分人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
      },
      {
        name: '高于80分人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
      }
    ]
  };
  myChart.setOption(option);
}
barChart();
// ------------------------------- 地图 -------------------------------
function mapChart() {
  let myChart = echarts.init($('.map')[0]);
  var chinaGeoCoordMap = {
    '黑龙江': [127.9688, 45.368],
    '内蒙古': [110.3467, 41.4899],
    "吉林": [125.8154, 44.2584],
    '北京市': [116.4551, 40.2539], // 这组数据中，必须多一条 目标点
  };
  var chinaDatas = [
    [{
      name: '黑龙江',
      value: 5
    }], [{
      name: '内蒙古',
      value: 1
    }], [{
      name: '吉林',
      value: 1
    }]
  ];

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539];
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [['北京市', chinaDatas]].forEach(function (item, i) {
    // console.log(item)
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
        // symbol: 'arrow', // 箭头图标
        // symbol: 'image://http://www.itcbc.com:3006/formdata/laoduan.jpg',
        // symbol: 'image://',
        symbol: 'path://M644.427078 956.858834c-1.959631 0-3.929496-0.322341-5.829775-0.981351l-93.384877-32.326243c-9.302877-3.219321-14.233166-13.371542-11.012821-22.674419 3.219321-9.3039 13.372565-14.233166 22.674419-11.012821l69.729108 24.136723 0-27.361161-56.793494-51.671846c-4.507664-4.100388-6.607488-10.218736-5.568832-16.223496 1.481747-8.56405 2.202155-15.871479 2.202155-22.339798 0-0.37146 0.01228-0.74292 0.034792-1.113357l10.960633-175.081551c0.372483-5.954619 3.700275-11.328 8.863878-14.31503 5.166673-2.989077 11.482519-3.192715 16.82827-0.548492l311.807538 154.23271 0-64.716954L589.587076 410.05312c-3.866051-3.385097-6.083555-8.273431-6.083555-13.411451L583.503521 181.125197c0-22.372543-9.601682-51.562353-24.461111-74.362638-15.458063-23.719214-34.08326-37.323047-51.099818-37.323047-17.016559 0-35.642778 13.602809-51.099818 37.322024-14.859429 22.800285-24.460088 51.990095-24.460088 74.362638l0 215.515449c0 5.13802-2.217505 10.027377-6.083555 13.411451L100.941993 694.860724l0 64.501036 306.089303-153.963581c5.323239-2.677992 11.632945-2.517333 16.813944 0.425695 5.180999 2.943029 8.5487 8.280594 8.975419 14.223956l13.57825 189.452863c0.030699 0.423649 0.045025 0.849344 0.045025 1.274016 0 3.140527 0.372483 6.514367 0.76748 10.085706l0.146333 1.332345c0.618077 5.675256-1.51961 11.304464-5.749958 15.138792l-54.42761 49.327452 0 27.220968L443.965487 893.933689c16.090467-6.587022 51.374064-9.872858 73.997318 23.608697 5.511527 8.156774 3.367701 19.237133-4.790096 24.74866-8.156774 5.509481-19.237133 3.367701-24.74866-4.790096-5.106298-7.557116-11.355629-11.511171-19.105127-12.087293-6.149047-0.459464-11.268648 1.313925-12.056594 1.604544-0.410346 0.186242-0.512676 0.209778-0.997724 0.38067l-81.002872 28.452006c-5.453199 1.914606-11.496845 1.067308-16.213263-2.27481-4.715395-3.342118-7.518231-8.762571-7.518231-14.543228l0-60.274782c0-5.031597 2.12643-9.827833 5.854335-13.20679l53.638641-48.613184c-0.12382-1.769296-0.209778-3.598968-0.226151-5.482875l-11.624758-162.198126L91.127464 804.205085c-5.52483 2.7793-12.096503 2.494821-17.362436-0.750083s-8.471952-8.987698-8.471952-15.173584l0-101.504812c0-5.13802 2.217505-10.027377 6.084579-13.411451l325.355089-284.808628L396.732743 181.125197c0-29.250184 11.588943-65.203024 30.242791-93.826945 22.487154-34.504862 51.241035-53.507658 80.967056-53.507658 29.723975 0 58.477856 19.002796 80.966033 53.507658 18.654872 28.624944 30.244838 64.576761 30.244838 93.826945l0 207.430306 325.350996 284.808628c3.866051 3.385097 6.083555 8.273431 6.083555 13.411451l0 101.504812c0 6.163373-3.184529 11.890818-8.420787 15.142885-5.234211 3.252067-11.780301 3.567245-17.306154 0.833995L611.344612 649.180336l-9.253758 147.804301c-0.025583 5.622044-0.436952 11.579733-1.24741 18.022469l55.579853 50.567699c3.712555 3.377934 5.828752 8.16496 5.828752 13.184277l0 60.274782c0 5.76633-2.789533 11.175527-7.485485 14.519692C651.707902 955.73115 648.085398 956.858834 644.427078 956.858834z',
        symbolSize: 10, //图标大小
        color: '#ee6666', // 线上的箭头颜色
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: .3 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 13
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            //offset:[5, 0],
            color: '#0f0',
            formatter: '{b}',
            textStyle: {
              color: "#0f0"
            }
          },
          emphasis: {
            show: true,
            color: "#f60"
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  let option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var res = "";
        var name = params.name;
        var value = params.value[params.seriesIndex + 1];
        res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        return res;
      }
    },
    backgroundColor: "#fff",
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 视觉映射组件
    // visualMap: { // 图例值控制
    //   min: 0,
    //   max: 1,
    //   show: false, // 不让组件显示
    //   calculable: true,
    //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
    //   textStyle: {
    //     color: '#fff'
    //   }
    // },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: '#dfe5f2', //地图背景色
          borderColor: '#516a89', // 省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' // 悬浮背景
        }
      }
    },
    series: series
  };

  myChart.setOption(option);
}

mapChart();